<template>
  <div class="container">
    <!-- 查询条件 -->
    <div class="filters">
      <el-input
        v-model="filters.MDName"
        placeholder="请输入模型名称"
        class="filter-input"
        clearable
      />
      <el-select
        v-model="filters.NodeName"
        placeholder="选择节点名称"
        class="filter-input"
        clearable
      >
        <el-option 
          v-for="node in nodeNameOptions" 
          :key="node.value" 
          :label="node.label" 
          :value="node.value" 
        />
      </el-select>
      <el-button type="primary" @click="fetchData" class="search-btn"
        >查询</el-button
      >
    </div>
    <div :style="`height:${view.height - 250}px`">
      <!-- 模型信息展示 -->
      <div class="card-list">
        <el-card
          v-for="item in modelData"
          :key="item.OBJID"
          class="engine-card"    
          :style="`;background:${
      isDark ? 'linear-gradient(145deg, #2e2e2e, #3c3c3c);' : '#fff'
    };`"
        >
          <div class="engine-card-content">
            <!-- 左侧引擎图标 -->
            <div class="icon">
              <el-image
                :src="item.icon || defaultIcon"
                fit="contain"
                style="width: 100px; height: 100px; border-radius: 10px"
                alt="Engine Icon"
              />
            </div>

            <!-- 右侧信息区域 -->
            <div class="info">
              <!-- 基本信息 -->
              <div class="top-section">
                <h3 class="name">{{ item.MDName }}</h3>
                <p class="description">{{ item.MDFileName || "无文件" }}</p>
                <p>
                  <strong>关联引擎</strong> &nbsp;<el-tag>人为活动变化检测</el-tag>
                </p>
              </div>
            </div>
          </div>
          <!-- 中部区域：复杂信息 -->
          <el-row class="complex-attributes">
            <el-col :span="8" style="margin-bottom: 5px">
              <el-icon>
                <Cpu />
              </el-icon>
              &nbsp; <strong>样本数量：</strong>{{ item.SampleCount }}
            </el-col>
            <el-col :span="8" style="margin-bottom: 5px">
              <el-icon>
                <InfoFilled />
              </el-icon>
              &nbsp; <strong>状态：</strong>{{ item.status || "正常" }}
            </el-col>
            <el-col :span="24" style="margin-bottom: 5px">
              <el-icon>
                <Document />
              </el-icon>
              &nbsp; <strong>节点名称： </strong>{{ item.Mark || "无备注" }}
            </el-col>
            <!-- <el-col :span="24" style="margin-bottom: 5px">
              <el-icon>
                <Folder />
              </el-icon>
              &nbsp; <strong>节点名称：</strong>{{ item.randomNodeName }}
            </el-col> -->
            <el-col :span="24" style="word-break: break-all">
              <el-icon>
                <Clock />
              </el-icon>
              &nbsp; <strong>创建时间：</strong>{{ item.CREATE_TIME }}</el-col
            >
          </el-row>
          <!-- 下部区域：其他信息 -->
          <el-row
            class="bottom-section"
            style="color: #999; word-break: break-all"
          >
            <el-icon>
              <Folder />
            </el-icon>
            &nbsp; <strong>文件路径：</strong> {{ item.MDFilePath || "无路径" }}
          </el-row>
        </el-card>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="pagination.page"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="handlePageChange"
        layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useDark, useToggle } from "@vueuse/core";
import {
  ElInput,
  ElSelect,
  ElOption,
  ElButton,
  ElCard,
  ElPagination,
  ElImage,
  ElIcon,
} from "element-plus";
import axios from "axios";
import {
  Cpu,
  Folder,
  Document,
  Clock,
  InfoFilled,
} from "@element-plus/icons-vue";

// 预定义的节点名称列表
const nodeNameOptions = [
  { label: '环保卫星中心节点', value: 'aletai' },
  { label: '海南节点', value: 'hainan' },
  { label: '云南节点', value: 'yunnan' },
  { label: '浙江节点', value: 'zhejiang' },
  { label: '山西节点', value: 'shanxi' },
  { label: '广西节点', value: 'guangxi' },
  { label: '重庆节点', value: 'chongqing' },
  { label: '山东节点', value: 'shandong' },
  { label: '江苏节点', value: 'jiangsu' },
  { label: '甘肃节点', value: 'gansu' },
];

const filters = reactive({
  MDName: "",
  NodeName: undefined,
  EngineType: undefined,
});

const modelData = ref<any[]>([]);
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

const defaultIcon ="https://t8.baidu.com/it/u=3719734923,2875480168&fm=193"; // 默认图标链接

// 随机选择节点名称
const getRandomNodeName = () => {
  const randomIndex = Math.floor(Math.random() * nodeNameOptions.length);
  return nodeNameOptions[randomIndex].label;
};

// 获取数据方法（查询接口）
const fetchData = async () => {
  try {
    const response = await axios.get("/algorithmApi/model-info/query", {
      params: {
        MDName: filters.MDName,
        EngineType: filters.EngineType,
        page: pagination.page,
        limit: pagination.pageSize,
      },
    });
    
    // 为每个模型添加随机节点名称
    modelData.value = response.data.data.map(item => ({
      ...item,
      randomNodeName: getRandomNodeName()
    }));

    pagination.total = response.data.total; // 更新总条数
  } catch (error) {
    console.error("查询失败", error);
  }
};

// 处理分页变化
const handlePageChange = (page: number) => {
  pagination.page = page;
  fetchData(); // 根据新的分页请求数据
};

// Managing the window height
const view = reactive({
  height: window.innerHeight,
});
let isDark = ref(useDark());
// 初始化数据
onMounted(() => {
  fetchData(); // 初始化加载数据
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  // background-color: #121212; /* 更深的黑色背景 */
  color: #fff; /* 文字为白色 */
}

.filters {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-input {
  width: 220px;
  color: #fff;
}

.search-btn {
  background-color: #409eff;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #338ecb;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.engine-card {
  // background: linear-gradient(145deg, #2e2e2e, #3c3c3c);
  border-radius: 10px;
  // color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 520px;
  height: 370px; // 略微增加高度以容纳新的节点名称行
  margin: 0 20px 20px 0;
}

.engine-card-content {
  display: flex;
  padding: 15px;
  gap: 20px;
}

.icon {
  flex-shrink: 0;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-section {
  margin-bottom: 10px;

  .name {
    font-size: 24px;
    margin: 0 0 5px;
    font-weight: 600;
  }

  .description {
    color: #ccc;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 250px;
  }
}

.complex-attributes {
  margin-bottom: 15px;

  el-col {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    el-icon {
      margin-right: 8px;
      color: #409eff;
    }
  }
}
</style>